<template>
  <div>
    <div class="windowInfo windowInfo2">
      <img src="../../../../public/hide1.png" alt @click="hideBox"
        style="width: 20px; position: absolute; top: 15px; left: 10px; z-index: 2; cursor: pointer" />

      <div class="showBox1">
        <div class="titleBox">
          <h3>网络及交互状态</h3>
          <!-- 在网状态显示 -->
          <!-- <div class="keyBox">
            <div class="WPZ">不在网</div>
            <div class="JL">在网</div>
          </div>-->
        </div>
        <div class="tableBox">
          <a-table :columns="columns" :pagination="false" :data-source="data" bordered rowKey="identificationCode"
            size="small"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: getCheckboxProps }">

            <div slot="action" slot-scope="text, record">
              <!--  NEW 新建
                RETIRED 已退网
                CONNECTED   已入网
                CONNECT_FAIL    入网失败 -->
              <a-popconfirm v-if="record.networkStatus == 'CONNECTED'" overlayClassName="poperLayTable" title="确认强制退网吗？"
                ok-text="确定" cancel-text="取消" @confirm="() => handleExit(record)">
                <a href="#">强制退网</a>
              </a-popconfirm>
              <span v-else>——</span>
            </div>

          </a-table>
          <a-table :scroll="{ x: 430, y: 170 }" :columns="columnsBall" :pagination="false" :data-source="dataSource"
            bordered size="small" v-if="selectedRowKeys.length > 0">
            <!-- <span slot="customTitle">
            <a-select @change="changeNo" style="width: 115px" default-value="指控车2">


              <a-select-option key="1" value="指控车1">指控车1</a-select-option>
              <a-select-option key="2" value="指控车2">指控车2</a-select-option>
              <a-select-option key="3" value="指控车3">指控车3</a-select-option>
              <a-select-option key="4" value="指控车4">指控车4</a-select-option>
            </a-select>
            </span>-->
            <!-- <div slot="name" slot-scope="text, record">
              <span :class="record.networkStatus_dictText == 0 ? 'err' : 'gre'">{{ text }}</span>
            </div>
            <div slot="user" slot-scope="text">
              <span
                v-for="i in text"
                :key="i.label"
                :class="i.networkStatus_dictText == 0 ? 'err' : 'gre'"
              >{{ i.label }}，</span>
            </div>-->
          </a-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import $ from 'jquery'
import { mapGetters } from 'vuex'
import { getAction, httpAction } from '@/api/manage'
export default {
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },
  watch: {
    websocketMsg: {
      handler(val) {
        let msg = JSON.parse(val)
        console.log(msg, '-----websocket的数据');
        if (msg.cmd == 'HOME_REFRESH') {
          this.getList()
        }
      },
    },
  },
  data() {
    const columns = [
      {
        title: '指控车',
        dataIndex: 'identificationCode',
        // slots: { title: 'customTitle' },
        key: 'identificationCode',
        customRender: function (text) {
          return text ? text : '——'
        }
        // scopedSlots: { customRender: 'name' },
      },
      {
        title: '在网/不在网',
        dataIndex: 'networkStatus_dictText',
        key: 'networkStatus_dictText',
        customRender: function (text) {
          return text ? text : '——'
        }
        // customRender: ({ key, queryParam, options }) => {
        //   return key == 1 ? '在网' : "不在网"
        // },
      },
      {
        title: '设备状态',
        dataIndex: 'deviceStatus_dictText',
        key: 'deviceStatus_dictText',
        customRender: function (text) {
          return text ? text : '——'
        }
      },
      {
        title: '周期交互',
        dataIndex: 'cycleInteractionStatus_dictText',
        key: 'cycleInteractionStatus_dictText',
        customRender: function (text) {
          return text ? text : '——'
        }
      },
      {
        title: "操作",
        key: 'action',
        scopedSlots: { customRender: 'action' },
      }
    ]

    const data = [
      // {
      //   key: '1',
      //   time: '1-2',
      //   name: '指控车12',
      //   networkStatus_dictText: 1,
      //   cycleInteractionStatus_dictText: 1,
      //   user: [
      //     {
      //       key: '12',
      //       ballNo: '导弹1',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     },
      //     {
      //       key: '1112',
      //       ballNo: '导弹12',
      //       networkStatus_dictText: 0,
      //       directTransmission: 1,
      //     },
      //     {
      //       key: '1122',
      //       ballNo: '导弹13',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     },
      //   ],
      // },
      // {
      //   key: '21',
      //   time: '1-3',
      //   name: '指控车2',
      //   networkStatus_dictText: 0,
      //   cycleInteractionStatus_dictText: 1,
      //   user: [
      //     {
      //       key: '12',
      //       ballNo: '导弹1',
      //       networkStatus_dictText: 1,
      //       directTransmission: 0,
      //     },
      //     {
      //       key: '1142',
      //       ballNo: '导弹12',
      //       networkStatus_dictText: 0,
      //       directTransmission: 1,
      //     },

      //   ],
      // },
      // {
      //   key: '3',
      //   time: '1-4',
      //   name: '指控车3',
      //   networkStatus_dictText: 1,
      //   cycleInteractionStatus_dictText: 0,
      //   user: [
      //     {
      //       key: '12',
      //       ballNo: '导弹1',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     },
      //   ],
      // },
      // {
      //   key: '4',
      //   time: '1-5',
      //   name: '指控车4',
      //   cycleInteractionStatus_dictText: 0,
      //   networkStatus_dictText: 1,
      //   user: [
      //     {
      //       key: '12',
      //       ballNo: '导弹1',
      //       networkStatus_dictText: 1,
      //       directTransmission: 0,
      //     },
      //     {
      //       key: '1192',
      //       ballNo: '导弹12',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     },
      //     {
      //       key: '11542',
      //       ballNo: '导弹13',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     },
      //     {
      //       key: '111',
      //       ballNo: '导弹13',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     }, {
      //       key: '114',
      //       ballNo: '导弹13',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     },
      //   ],
      // },
    ]

    return {
      selectedRowKeys: [],
      columnsBall: [{
        title: '导弹识别码',
        dataIndex: 'identificationCode',
        key: 'identificationCode',
        width: 120,
      },
      {
        title: '在网/不在网',
        dataIndex: 'onlineStatus_dictText',
        key: 'onlineStatus_dictText',
        width: 110,
      },
      {
        title: '设备状态',
        dataIndex: 'deviceStatus_dictText',
        key: 'deviceStatus_dictText',
        customRender: function (text) {
          return text ? text : '/'
        }
      },
      {
        title: '直传状态',
        dataIndex: 'directTransmissionStatus_dictText',
        key: 'directTransmissionStatus_dictText',
        customRender: function (text) {
          return text ? text : '/'
        }
      },
      ],
      carList: [
        { label: '指控车1', value: '1' },
        { label: '指控车2', value: '2' },
        { label: '指控车3', value: '3' },
      ],
      data,
      dataSource: [],
      columns,
      url: {
        sendPackage: "/channel/nmcChannelInfo/sendPackage",
        getDirectTransmission: "/missile/nmcMissileInfo/getByFightDemandIdAndNcvIdentificationCodeOfHomePageVo",
        getInteractionStatus: "/commandVehicle/nmcCommandVehicle/getByCurrentDayRunningFightDemandOfCommandVehicleHomePageVo"
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleExit(record) {
      console.log(record, 'record');
      let params = {
        nmcPackageGridValues: [
          {
            batchId: '',
            gridCode: '38-接收端识别码',
            packageGridValue: record.identificationCode,
          },
        ],
        packageCode: '38指挥车强制退网指令',
      }
      let that = this
      httpAction(this.url.sendPackage, params, 'post').then((res) => {
        if (res.code == 200) {
          that.$message.success('发包成功！')
          this.getList()
        } else {
          that.$message.error('发包失败！')
        }
      })
    },
    getCheckboxProps(record) {
      console.log(record, '--------')
      return {
        props: {
          // 最多选6个
          disabled: this.selectedRowKeys.length >= 1 ? this.selectedRowKeys.includes(record.identificationCode) === false : false,
        },
      }
    },
    getList() {
      getAction(this.url.getInteractionStatus).then(res => {
        if (res.success) {
          let dataSource = res.result
          console.log(dataSource, 'res.dataSource-*-*-*-');
          this.data = [...dataSource]
          if (dataSource.length != 4) {
            console.log(dataSource, 'res.dataSource1111111');
            for (let i = 0; i < 4 - dataSource.length; i++) {
              this.data.push({})
              console.log(i, '====================i');
            }
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    onSelectChange(selectedRowKeys, row) {
      console.log(selectedRowKeys, 'selectselect', row)
      if (selectedRowKeys.length > 1) {
        selectedRowKeys.shift()
      }
      row = row.filter(item => item.identificationCode == selectedRowKeys[0])
      this.selectedRowKeys = selectedRowKeys
      // //选车的时候  查看导弹数据
      if (row.length) {
        let select = row[0]
        let data = { fightDemandId: select.fightDemandId, ncvIdentificationCode: select.identificationCode }
        getAction(this.url.getDirectTransmission, data).then(res => {
          if (res.success) {
            this.dataSource = res.result
          } else {
            this.dataSource = []
            this.$message.error(res.message)
          }
        })
      }

    },
    // changeNo(val) {
    //   let select = this.data.find((i) => i.name == val)
    //   this.dataSource = []
    //   this.dataSource = [select]
    //   this.$emit('changeCar', val)
    // },
    handleChangeStep(value) {
      this.dataSource = [this.data[value - 1]]
    },
    hideBox() {
      $('.showBox1').fadeToggle(1000)
    },
  },
}
</script>

<style lang="less" scoped>
/* .windowInf */
.titleBox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 30px;

  .keyBox {
    font-size: 14px;

    color: #fff;
    height: auto;
    display: flex;
    border-radius: 15px;
    padding: 5px;

    div {
      padding: 0 2px;
    }

    .WPZ {
      line-height: 14px;
      margin-right: 5px;

      &::before {
        display: inline-block;
        content: '';
        width: 12px;
        height: 12px;
        background: red;
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    .JL {
      line-height: 14px;

      &::before {
        display: inline-block;
        content: '';
        width: 12px;
        height: 12px;
        background: rgb(108, 245, 108);
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    // .WJL {
    //   background: rgb(230, 215, 19);
    // }
    // .JL {
    //   background: rgb(80, 226, 60);
    // }
    // .DX {
    //   background: rgb(119, 118, 118);
    // }
  }
}
</style>

<style lang="less" scoped>
.tableBox {
  .ant-table-header {
    background: transparent !important;
  }

  .ant-table .ant-table-thead>tr>th {
    background: transparent !important;
  }
}


.windowInfo {
  position: relative;
  min-width: 45px;
  min-height: 45px;

  line-height: 30px;
  text-align: center;
  color: #fff;
  padding: 5px 2px;
  background: rgba(30, 36, 50, 0.6) !important;

  .bodyBox {
    // width: 250px;
    display: flex;

    .body {
      width: 250px;
      margin: -1px;
      border: 1px solid;
    }
  }
}

/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 2px solid #4f78ae;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}

.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>

<style>
.windowInfo .ant-empty-normal {
  color: #fff;
}

/* 
.windowInfo .ant-table .ant-table-row:hover>td {
  color: #000;
  background: #fff !important;
} */

/* .windowInfo2 .ant-select-selection {
  background: transparent;
  color: #fff;
}
.windowInfo2 .ant-select-arrow svg {
  color: #fff;
} */
.err {
  color: red;
}

.gre {
  color: rgb(108, 245, 108);
}

.windowInfo .ant-descriptions-title,
.windowInfo .ant-descriptions-item-label,
.windowInfo .ant-descriptions-item-content {
  color: #fff !important;
}

.tableBox {
  display: flex;

}
</style>
